import React, { useEffect, useState, useMemo } from 'react';
import { RouteRequest } from '@peace/utils';
import { WEATHERMARGIN, ICONSMAP } from '../constants/weather';
import { ApiTable, useFsRequest, getName, getPhone } from '$utils';
import { Box } from '$components';
import { Select } from 'antd';
const { Option } = Select;

function BasicInfo() {
    const { data: list = [] } = useFsRequest({ url: 'water/realstate' });

    const [weather, setWeather] = useState([]);
    const [id, setId] = useState();
    const queryWeather = () => {
        RouteRequest.get(`/query/weather/3d?location=101240101`).then((res) => {
            if (res?.daily?.length === 3) {
                setWeather(res.daily);
            }
        });
    };

    useEffect(() => {
        if (list?.length > 0) {
            setId(list[0]?.id)
        }
    }, [list])

    useEffect(() => {
        queryWeather();
        const timeUpdate = setInterval(() => {
            queryWeather();
        }, WEATHERMARGIN);
        return () => {
            clearInterval(timeUpdate);
        };
    }, []);

    const iconSrc = useMemo(() => {
        if (weather.length === 3) {
            const icon = [ICONSMAP[weather[0].textDay], ICONSMAP[weather[1].textDay], ICONSMAP[weather[2].textDay]];
            return icon;
        }
        return [];
    }, [weather]);

    const renderSubtitle = () => (
        <Select
            className="gis-search-select"
            popupClassName="super-dropdownClassName"
            style={{ width: 140, height: 24 }}
            showSearch={false}
            optionFilterProp="children"
            value={id}
            onChange={e => { setId(e) }}
        >
            {list?.map(s => <Option key={s.id} value={s.id}>{s.name}</Option>)}
        </Select>
    );

    const data = list?.find(s => s.id == id)

    return <Box title={"实时态势"} subtitleSelect={renderSubtitle()}>
        <div className='real_state_container'>
            <div className='real_weather'>
                <div className='weather_left'>
                    <div className='_basictitlebg'>
                        <div className='_basic_title'>今天</div>
                        <span className='_basic_sub_title'>{weather[0]?.fxDate}</span>
                    </div>
                    <div className='row1_container'>
                        <img src={iconSrc[0] || ICONSMAP.未知} alt="icon" style={{ width: 43, height: 38, margin: '0 5px' }} />
                        <span>{weather[0]?.textDay}</span>
                        <span style={{ color: '#24DCF7' }}>{weather[0]?.tempMin}-{weather[0]?.tempMax}℃</span>
                    </div>

                </div>
                <div className='weather_right'>
                    <div>今日雨量</div>
                    <div><span className='weather_data'>{weather[0]?.precip}</span>mm</div>
                </div>
            </div>
            <div className='real_weather'>
                <div className='weather_left'>
                    <div className='row2_container'>
                        <div className='row2_item'>
                            <div className='_number'>明天</div>
                            <div className='weather_icon'></div>
                            <div>{weather[1]?.tempMin}-{weather[1]?.tempMax}℃</div>
                        </div>
                        <div className='row2_item'>
                            <div className='_number'>后天</div>
                            <div className='weather_icon'></div>
                            <div>{weather[2]?.tempMin}-{weather[2]?.tempMax}℃</div>
                        </div>
                    </div>
                </div>
                <div className='weather_right'>
                    <div>明日雨量</div>
                    <div><span className='weather_data'>{weather[1]?.precip}</span>mm</div>
                </div>
            </div>

            <div className='basictextbg'>
                <span>名称：</span>
                <span className='row1_row3_subtitle'>{data?.name}</span>
            </div>
            <div className='basictextbg'>
                <span>设立地点：</span>
                <span className='row1_row3_subtitle'>{data?.location}</span>
            </div>
            <div className='basictextbg'>
                <span>指挥责任人：</span>
                <span className='row1_row3_subtitle'>{data?.commander?.split('、').map(s => getName(s)).toString()}</span>
            </div>
            <div className='basictextbg'>
                <span>管辖堤长：</span>
                <span className='row1_row3_subtitle'>{data?.dikeLength}</span>
            </div>
        </div>
    </Box>
}

export default BasicInfo;


